<template>
    <div class="page-content">
        <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
        <button @click="handleReset">清空画板</button> 
        <button @click="handleGenerate">生成图片</button>
        <p>
            <img :src="resultImg"/>
        </p>
    </div>
</template>
<script>
export default{
    name: "write",
    data () {
        return {
            lineWidth: 6,
            lineColor: '#000000',
            bgColor: '',
            resultImg: '',
            isCrop: false
        }
    },
    methods: {
        handleReset () {
            this.$refs.esign.reset()
        },
        handleGenerate () {
            this.$refs.esign.generate().then(res => {
            this.resultImg = res
            }).catch(err => {
            alert(err) // 画布没有签字时会执行这里 'Not Signned'
            })
        }
    }
}
</script>
<style lang="less">
    
</style>